<!DOCTYPE html>
<html lang="en">

<head>
    <meta>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./js/store.legacy.min.js"></script>
</head>

<body>
    <button style="padding: 10px; margin: 10px;" id="clearLocal" onclick="store.remove('imgCache')">清除缓存</button>
    <img width="100%" data-src='./images/1.jpg' id="img1" src="./images/default.gif">
    <img width="100%" data-src='./images/7.png' id="img2" src="./images/default.gif">
    <img width="100%" data-src='./images/8.png' id="img3" src="./images/default.gif">
    <img width="100%" data-src='./images/9.png' id="img4" src="./images/default.gif">
    <img width="100%" data-src='./images/6.png' id="img5" src="./images/default.gif">
    <img width="100%" data-src='./images/5.png' id="img6" src="./images/default.gif">
    <script type="text/javascript">
    //获取img url
    var imgAY = document.querySelectorAll('img');
    var srcImg = [];

    for (var i = 0; i < imgAY.length; i++) {
        srcImg.push(imgAY[i].getAttribute('data-src'));
    }

    localStrogeImg(srcImg);

    /**
     * [localStrogeImg 图片本地缓存]
     * @Author   zhanggongze
     * @DateTime 2017-06-01
     * @param    {[type]}    srcImg [图片data-src属性]
     * @return   {[type]}           [description]
     */
    function localStrogeImg(srcImg) {

        var isCache = false; //false表示本地没有缓存

        var indexC = 0;

        //获取缓存数据
        var oCaches = store.get('imgCache');
        var cacheArray = []; //缓存多张图片
        console.log(oCaches);

        //检查是否已经缓存
        if (oCaches != undefined) {
            var noCache = 0;
            var yesCache = 0;
            for (var k = 0; k < srcImg.length; k++) {
                console.log('////////////////////////');
                console.log(srcImg[k]);


                for (key in oCaches) {

                    if (key == srcImg[k]) {
                        console.log('-----------------');
                        console.log('=' + key);
                        console.log('=' + srcImg[k]);
                        yesCache++;
                        cacheImg(k)
                    } else {
                        console.log('------------------');
                        console.log('！=' + key);
                        console.log('！=' + srcImg[k]);

                        noCache++

                        // var o = {};
                        // loadImg(srcImg[k], k + 1);
                    }

                }
            }


            console.log(yesCache);
            console.log(noCache);
        } else {

            for (var j = 0; j < srcImg.length; j++) {
                //存储至本地的对象
                var o = {};
                loadImg(srcImg[j], j + 1);
            }
        }

        if (yesCache < srcImg.length) {
            // alert(1);

            for (var j = 0; j < srcImg.length; j++) {
                //存储至本地的对象
                var o = {};
                loadImg(srcImg[j], j + 1);
            }
        }

        //判断是否已经缓存
        // if (!isCache) {

        // for (var j = 0; j < srcImg.length; j++) {
        //     //存储至本地的对象
        //     var o = {};
        //     loadImg(srcImg[j], j + 1);
        // }

        // } else {

        // for (var m = 0; m < cacheArray.length; m++) {
        //     cacheImg(m)
        // }

        // }

        //读取缓存图片
        function cacheImg(m) {
            var index = srcImg[m];
            selectId('#img' + (m + 1)).setAttribute('src', oCaches[index]);
        }

        //读取服务器上的图片
        function loadImg(src, index) {

            var oImg = new Image();
            oImg.src = src;

            oImg.onload = function() {
                //展示图片
                selectId('#img' + index).setAttribute('src', src);
                //转码
                o[src] = getBase64Image(oImg);

                //将64位的编码保存至本地
                store.set('imgCache', o);
            };
        };

        //ID选择器
        function selectId(str) {
            return document.querySelector(str);
        }

        //元素选择器
        function selectAll(str) {
            return document.querySelectorAll(str);
        }

        //转码
        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var dataURL = canvas.toDataURL("image/jpg");
            return dataURL
        }

    }
    </script>
</body>

</html>
